<style scoped>
    @import  '../../asset/homePage/css/homePage.css';

    .content {
        width: 100%;
        margin: 60px auto; 
    }
    .news-item {
        width: 100%;
        height: 150px;
        border-bottom: solid 1px #f2e68e; 
    }
    .news-title{
        cursor: pointer;
    }
    .news-title:hover{
        color: #bda912; 
    }
    .more-btn{
        cursor: pointer;
        font-weight: 100;
        color: #b6b6b6;
    }
    .more-btn:hover{
        color: #555;
    }
    p{
        text-indent: 2em;
    }
</style>
<template>
    <div v-cloak>
        <Carousel v-model="startImage" :autoplay="setting.autoplay" :autoplay-speed="setting.autoplaySpeed" :dots="setting.dots"
            :radius-dot="setting.radiusDot" :trigger="setting.trigger" :arrow="setting.arrow" :height="setting.height">
            <CarouselItem>
                <div class="homePage-bgImg1">
                    <div class="homePage-bg1-content homePage-bg1-font">
                        <div class="homePage-bg1-title1">
                            <span>资本投资</span>
                        </div>
                        <div class="homePage-bg1-title2">
                            <span>CAPITAL INVESTMENT</span>
                        </div>
                        <div class="homePage-bg1-title3">
                            <span class="span1">诚信致远 财智天下</span>
                        </div>
                    </div>
                </div>
            </CarouselItem>
            <CarouselItem>
                <div class="homePage-bgImg2">
                    <div class="homePage-bg2-content">
                        <div class="homePage-bg2-title1">
                            <span class="homePage-bg2-font1">PROFESSIONAL LEVEL SECURITY</span>
                        </div>
                        <div class="homePage-bg2-title2">
                            <span class="homePage-bg2-font2">控制风险 把握利润</span>
                        </div>
                        <div class="homePage-bg2-title3">
                            <span class="homePage-bg2-font3">— 您的托付 我们的责任 —</span>
                        </div>
                    </div>
                </div>
            </CarouselItem>
            <CarouselItem>
                <div class="homePage-bgImg3">
                    <div class="homePage-bg2-content">
                        <div class="homePage-bg2-title1">
                            <span class="homePage-bg2-font1">— PROFESSIONAL FINANCIAL MANAGEMENT —</span>
                        </div>
                        <div class="homePage-bg2-title2">
                            <span class="homePage-bg2-font2">高收益理财专家</span>
                        </div>
                        <div class="homePage-bg2-title3">
                            <span class="homePage-bg2-font3">— 值得您的信赖 —</span>
                        </div>
                    </div>
                </div>
            </CarouselItem>
        </Carousel> 
        <div class="content">
            <Row>
                <Col span="10" offset="1" style="height:400px;font-family: '微软雅黑','sans-serif';color: black;">
                    <div style="width:100%;border-bottom:2px solid #bda912;height:30px;font-size:16px;lint-height:30px;font-weight:bold;">
                        公司简介
                        <div style="float:right;" class="more-btn" @click="goMore('aboutUsCom')">more▶</div>
                    </div>
                    <div style="font-size:16px;padding:10px 0;">
                        <p style="line-height:30px;">上海协囤投资管理有限公司成立于2016年3月，注册资本人民币壹仟万元。注册于上海崇明，办公地点在陆家嘴中心区上海银行大厦。公司高管拥有近10年投资和财富管理行业经验，曾先后在私募股权和大型金融投资公司担任投资经理等职务。</p>
                        <p style="line-height:30px;margin-top: 20px">公司于2017年5月完成股权、法人和经营范围变更。公司已经成功进行基金协会备案，阳光私募产品成功发行。</p>
                    </div>
                </Col>
                <Col span="10" offset="1" style="height:400px;float:left;font-family: '微软雅黑','sans-serif';color: black;">
                    <div style="width:100%;border-bottom:2px solid #bda912;height:30px;font-size:16px;lint-height:30px;font-weight:bold;">
                        协囤新闻
                         <div style="float:right;" class="more-btn"  @click="goMore('newsXietun')">more▶</div>
                    </div>
                    <div style="font-size:16px;padding:10px 0;font-family: '微软雅黑','sans-serif';color: black;">
                        <div v-for="(item,index) in newsXietunList" class="news-item" v-if="index<2">
                            <div style="float:left;width:100%;">
                                <div style="height:100px;margin-top:10px;"> 
                                    <div style="font-size:16px;font-weight:bold;" @click="goXietunDetail(index)" class="news-title">{{item.title}}</div><br>
                                <p class="p-content">
                                    {{item.content[0].substring(0,50)}}...... </p>
                                </div>
                                    <div style="text-align:right">{{item.date[1]}}{{item.date[0]}}</div>
                            </div>
                        </div>
                    </div>
                </Col>
            </Row>
            <Row>
                <Col span="10" offset="1" style="height:400px;float:left;font-family: '微软雅黑','sans-serif';color: black;">
                    <div style="width:100%;border-bottom:2px solid #bda912;height:30px;font-size:16px;lint-height:30px;font-weight:bold;">
                        投资理念
                         <div style="float:right;" class="more-btn" @click="goMore('aboutUsBus')">more▶</div>
                    </div>
                    <div style="font-size:16px;padding:10px 0;">
                        <p style="line-height:30px;">公司倾向于多样化风险回报组合的投资策略，倡导分散化投资，主要集中于估值较低，有较好业绩的投资标的，同时强化风险的控制，对止损有强制规定。</p>
                        <p style="line-height:30px;">公司希望按照最成熟稳健的商业模式，通过独立深入的研究发现市场的价值，发掘伟大的公司并与之一起成长，实现投资人、股东、员工利益与资本市场的长期良性互动。公司管理团队曾经在世界五百强的保险公司从事资产管理工作，对资本市场的投资有深入独到的理解，相信研究创造价值，公司致力于通过持续稳健的盈利积累市场口碑，获取客户信任，实现多方共赢。</p>
                    </div>
                </Col>
                <Col Col span="10" offset="1" style="height:400px;float:left;font-family: '微软雅黑','sans-serif';color: black;">
                    <div style="width:100%;border-bottom:2px solid #bda912;height:30px;font-size:16px;lint-height:30px;font-weight:bold;">
                        协囤分享
                         <div style="float:right;" class="more-btn" @click="goMore('newsCenter')">more▶</div>
                    </div>
                    <div style="font-size:16px;padding:10px 0;">
                        <div v-for="(item,index) in newsCenterList" class="news-item" v-if="index<2">
                            <div style="float:left;width:100%">
                                <div style="height:100px;margin-top:10px;"> 
                                    <div style="font-size:16px;font-weight:bold;" @click="goCenterDetail(index)" class="news-title">{{item.title}}</div><br>
                                <p class="p-content">
                                    {{item.content[0].substring(0,50)}}...... </p>
                                </div>
                                    <div style="text-align:right">{{item.date}}</div>
                            </div>
                        </div>
                    </div>
                </Col>
            </Row>
            
        </div>
    </div>
</template>

<script>
    export default {
        name: 'homePage',
        data() {
            return {
                startImage: 0,
                setting: {
                    autoplay: true,
                    autoplaySpeed: 5000,
                    dots: 'inside',
                    radiusDot: true,
                    trigger: 'click',
                    loop: true,
                    height: 400
                },
                newsCenterList : [],
                newsXietunList : []
            }
        },
        beforeCreate () {
            $.getJSON('../../../data/news.json',data=>{  
                        this.newsCenterList = data.newsCenterList;  
                         this.newsXietunList = data.newsXietunList;  
            })
        },
        methods: {
            goCenterDetail(index){ 
                window.open(window.location.origin+'/html/centerDetail.html?'+index,'_blank');
            },
            goXietunDetail(index){ 
                window.open(window.location.origin+'/html/xietunDetail.html?'+index,'_blank');
            },
            goMore(name){
                this.$parent.turnUrl(name);
            }
        }
    };
</script>